<template>
  <div class="area-scroll-container">
    <div class="chart-header">
      <h3>项目进度状态统计</h3>
    </div>
    <div class="table-header">
        <div class="table-cell">买方</div>
        <div class="table-cell">业务员</div>
      <div class="table-cell">订单金额</div>
      <div class="table-cell">合同交货期</div>
      <div class="table-cell">项目来源</div>
      <div class="table-cell">项目状态</div>
      
    </div>
    <div class="scroll-content">
      <vue-seamless-scroll :data="statusDataList" class="seamless-warp" :class-option="defaultOption">
        <div v-for="item in statusDataList" :key="item.id" class="table-row">
          <!-- <div class="table-cell">{{ index}}</div> -->
          <div class="table-cell">{{ item.customName }}</div>
          <div class="table-cell">{{ item.salesmanName}}</div>
          <div class="table-cell">{{ item.contractMoney}}元</div>
          <div class="table-cell">{{ item.deliveryTime}}</div>
          <div class="table-cell"> <dict-tag :options="dict.type.project_source" :value="item.source"/></div>
          <div class="table-cell"><dict-tag :options="dict.type.pro_status" :value="item.status"/></div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>item

<script>
import {getAction} from "@/api/manage";
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  name: "AreaList",
   dicts: ['pro_status','project_source'],
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      statusDataList: [
      
      ],
      defaultOption: {
        step: 1,
        limitMoveNum: 5,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000
      }
    };
  },
  mounted() {
    this.getStatusDeptCount();
  },
  methods: {
    getStatusDeptCount() {
        var data = {
            orderByColumn:'create_time',
            isAsc:'desc',   
            pageNum: 1,
            pageSize:50
        }
    //   实际API调用
      getAction('/projectBaseInfo/projectBaseInfo/list',data).then(response => {
        this.statusDataList = response.rows;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.area-scroll-container {
  width: 100%;
  max-width: 100%;
  border: 0.1px solid #0d90ef;
  border-radius: 4px;
  overflow: hidden;
}
.chart-header {
  text-align: center;
  margin-bottom: 15px;
  h3 {
    color: #ffffff;
    font-size: 1.2rem;
  }
}

.table-header {
  display: flex;
  justify-content: space-between;
//   background-color: #f5f7fa;
  padding: 10px 0;
  font-weight: bold;
  color: #2FFAFC;
}

.scroll-content {
  height: 300px; /* 可以根据需要调整高度 */
  overflow: hidden;
}

.seamless-warp {
  height: 100%;
}

.table-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border: 0.1px solid #0d90ef;
  color: #2FFAFC;
}

.table-cell {
  flex: 1;
  text-align: center;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>